import React, { Component } from 'react'
import { Tabs, NavBar } from 'react-vant';
// 引入子组件收入支出
import Incomexpend from './Incomexpend';
// 引入路由
import { Switch,Route,Redirect,Link } from 'react-router-dom';
//添加组件
export default class Addcom extends Component {
  render() {
    return (
      <div>
        <NavBar
          title="添加"
          leftText="返回"
          onClickLeft={() => {
            // 返回上一页
            this.props.history.push("/zccount")
          }}
        />
        <Tabs type='card' onChange={(index)=>{
          this.props.history.push(`/addcom/incomexpend/${index+1}`)
        }}>
        {['支出','收入'].map(item => (
          <Tabs.TabPane key={item} title={item}>
          </Tabs.TabPane>
        ))}
      </Tabs>

      {/* 配置嵌套路由 渲染在一级路由基础上 */}
        <Switch>
        <Route path="/addcom/incomexpend/:type" component={Incomexpend}></Route>
        <Redirect from="/addcom" to="/addcom/incomexpend/1"></Redirect>
        </Switch>
      </div>
    )
  }
}
